<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">{{title}}</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}">>{{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center" style="min-height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div class="tabletitle" style="float: left;">
            <el-col style="width: 284px;margin-right: 5px;">
              <el-radio v-model="radio" label="已入职" @change="radioChange">已入职</el-radio>
              <el-radio v-model="radio" label="待入职" @change="radioChange">待入职</el-radio>
              <el-radio v-model="radio" label="待离职" @change="radioChange">待离职</el-radio>
            </el-col>
            
            <el-col style="width: 40px;margin-right: 5px;">
              <h5>搜索 : </h5>
            </el-col>
            <el-col
              class="interviewtrack"
              style="margin-right:10px;margin-left: 8px;width: 400px;"
            >
              <el-col :span="23" style="width: 180px;margin-right: 20px;">
                <el-date-picker
                  v-model="startTime"
                  type="date"
                  placeholder="请选择开始时间"
                  value-format="yyyy-MM-dd"
                  @change="selectstart"
                  :picker-options="pickerBeginDateBefore">
                </el-date-picker>
              </el-col>
              <el-col :span="23" style="width: 180px;float: left;margin-right: 20px;">
                <el-date-picker
                  v-model="endTime"
                  type="date"
                  placeholder="请选择结束时间"
                  value-format="yyyy-MM-dd"
                  @change="selectend"
                  :picker-options="pickerBeginDateAfter">
                </el-date-picker>
              </el-col>
            </el-col>
          
          
          </div>
          <div class="interviewtrack1 right1" style="float: right;">
            <el-input
              style="margin-right: 10px;"
              v-model.trim="inputValue"
              size="small"
              placeholder="请输入内容"
              @keyup.enter.native="searchMsg"
            >
              <i slot="suffix" class="el-input__icon el-icon-search" style="cursor: pointer;" @click="searchMsg"></i>
            </el-input>
            <el-button
              class="add"
              size="small"
              @click="add"
              round>新增
            </el-button>
            <el-button
              class="edit"
              size="small"
              @click="edit"
              round>修改
            </el-button>
            <el-button
              class="download"
              size="small"
              @click="download"
              round>导出
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            :key="Math.random()"
            @current-change="handleCurrentChange"
            class="tableT"
          >
            <el-table-column label="入职公司" width="120">
              <template slot-scope="props">
                <span>{{props.row.company}}</span>
              </template>
            </el-table-column>
            <el-table-column label="部门" width="150">
              <template slot-scope="scope">
                <span>{{scope.row.department}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="customer" label="入职客户" width="100"></el-table-column>
            <el-table-column prop="position" label="职位" width="80"></el-table-column>
            <el-table-column prop="area" label="区域" width="90"></el-table-column>
            <el-table-column prop="name" label="姓名" width="90">
              <template slot-scope="scope">
                <span @click="view(scope.row.id)" style="color: #1198ff;cursor: pointer;">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="90"></el-table-column>
            <el-table-column label="毕业时间" width="100" prop="graduationTime">
            </el-table-column>
            <el-table-column label="入职时间" width="100">
              <template slot-scope="scope">
                <span>{{scope.row.entryTime}}</span>
              </template>
            </el-table-column>
            <el-table-column label="入场时间" width="150" prop="admissionTime">
            </el-table-column>
            <el-table-column prop="probationPeriod" label="试用期" width="120"></el-table-column>
            <el-table-column label="补助" width="300" prop="subsidy">
            </el-table-column>
            <el-table-column label="薪资">
              <template slot-scope="scope">
                <span>{{scope.row.salary}}k*{{scope.row.salaryNum}}</span>
              </template>
            </el-table-column>
            <el-table-column label="招聘专员" prop="recommender">
            </el-table-column>
          </el-table>
          <div class="pager">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    
    
    <el-dialog
      title="错误"
      :visible.sync="errordialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
          <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何入职信息!</span>
        </i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="sure" round @click="handleOpen">确 定</el-button>
        <el-button round @click="handleClose" class="cancel">取 消</el-button>
      </span>
    </el-dialog>
    
    <!-- 新增入职信息表数据-->
    <div v-if="type == 1">
      <entryinfo-add ref="EntryinfoAdd" v-show="addShow" @getlist="addTabledata"></entryinfo-add>
    </div>
    <!--修改入职信息表数据-->
    <div v-if="type == 2">
      <entryinfo-edit ref="EntryinfoEdit" v-show="addShow" :current-data="currentRow"
                      @getlist="editTabledata"></entryinfo-edit>
    </div>
    <!--查看入职信息表的详情-->
    <div v-if="type == 3">
      <entryinfo-Detail ref="EntryinfoDetail" v-show="addShow" :detail-code="detailcode"></entryinfo-Detail>
    </div>
  </div>
</template>
<script>
  import axios from "axios";
  import moment from 'moment'
  import entryinfoAdd from './entryinfoadd'
  import entryinfoEdit from './entryinfoedit'
  import entryinfoDetail from './entryinfodetail'
  
  export default {
    name: "entryInformation",
    data() {
      return {
        radio: '已入职',
        secondshow: false,
        addShow: false,
        type: null,
        secondtitle: '',
        title: "",
        inputValue: "",
        tableData: [],
        currentPage: 1,
        pagesize: 15,
        currentRow: null,
        totalcount: 0,
        errordialogVisible: false,
        companylist: [],
        positionlist: [],
        startTime: '',
        endTime: '',
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.endTime) {
              return moment(time.getTime()).format('YYYY-MM-DD') > this.endTime
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            if (this.startTime) {
              return moment(time.getTime()).format('YYYY-MM-DD') < this.startTime
            }
          }
        },
        detailcode : ''
      };
    },
    created() {
      this.title = this.$route.meta.title;
      this.Entry();
    },
    methods: {
      //单选框变化
      radioChange() {
        this.getTabledata();
      },
      selectstart() {
        this.getTabledata();
      },
      selectend() {
        this.getTabledata();
      },
      getTabledata() {
        this.currentPage = 1;
        if (this.radio == '已入职') {
          this.Entry();
        } else if (this.radio == '待入职') {
          this.willEntry();
        } else if (this.radio == '待离职') {
          this.willquit();
        }
      },
      addTabledata() {
        this.addShow = false;
        this.secondshow = false;
        this.type = null;
        this.currentRow = null;
        this.currentPage = 1;
        if(this.radio == '已入职'){
          this.Entry();
        }else if(this.radio == '待入职'){
          this.willEntry();
        }else if(this.radio == '待离职'){
          this.willquit();
        }
      },
     editTabledata() {
        this.addShow = false;
        this.secondshow = false;
        this.type = null;
        this.currentRow = null;
        if(this.radio == '已入职'){
          this.Entry();
        }else if(this.radio == '待入职'){
          this.willEntry();
        }else if(this.radio == '待离职'){
          this.willquit();
        }
      },
      //待离职
      willquit() {
        axios.post(this.url + '/entryquit/getWillQuitDetail', {
            condition: this.inputValue,
            startTime: this.startTime,
            endTime: this.endTime,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          }
        ).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      //已入职
      Entry() {
        axios.post(this.url + '/entryquit/getEntryDetail', {
            condition: this.inputValue,
            startTime: this.startTime,
            endTime: this.endTime,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          }
        ).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      //待入职
      willEntry() {
        axios.post(this.url + '/entryquit/getWillEntryDetail', {
            condition: this.inputValue,
            startTime: this.startTime,
            endTime: this.endTime,
            pageNum: this.currentPage,
            pageSize: this.pagesize
          }
        ).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      //搜索功能
      searchMsg() {
        this.getTabledata();
      },
      add() {
        this.addShow = !this.addShow;
        this.secondtitle = "新增";
        this.secondshow = true;
        this.type = 1;
      },
      edit() {
        if (this.currentRow) {
          this.addShow = !this.addShow;
          this.secondtitle = "修改";
          this.secondshow = true;
          this.type = 2;
        } else {
          this.errordialogVisible = true;
          document.documentElement.style.overflow = "hidden";
        }
      },
      handleSizeChange(val) {
        this.pagesize = val;
        if(this.radio == '已入职'){
          this.Entry();
        }else if(this.radio == '待入职'){
          this.willEntry();
        }else if(this.radio == '待离职'){
          this.willquit();
        }
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        if(this.radio == '已入职'){
          this.Entry();
        }else if(this.radio == '待入职'){
          this.willEntry();
        }else if(this.radio == '待离职'){
          this.willquit();
        }
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      tableshow(row) {
        this.addShow = false;
        this.secondshow = false;
        this.$refs.singleTable.setCurrentRow(row);
        this.type = null;
        this.currentRow = null;
      },
      //关闭错误提示弹出框
      handleOpen() {
        this.errordialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      handleClose() {
        this.errordialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      view(id){
        this.detailcode = id;
        this.addShow = !this.addShow;
        this.secondtitle = "查看详情";
        this.secondshow = true;
        this.type = 3;
      },
      download(){
          window.location.href = this.url + "/entryquit/ExcelDownload?startTime="  + this.startTime + "&&endTime=" + this.endTime;
      }
    },
    watch: {
      inputValue: function (val) {
        if (val == "") {
          this.getTabledata();
        }
      }
    },
    components: {
      entryinfoAdd,
      entryinfoEdit,
      entryinfoDetail
    }
  };
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .tabletitle {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
  }
  
  .add {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
    padding: 7px 15px !important;
  }
  
  .add:hover {
    color: #fff !important;
  }
  
  
  .edit {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
  }
  
  .edit:hover {
    color: #fff !important;
  }
  
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .textactive {
    color: #1099ff;
  }
  .download {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    margin-left: 5px;
    color: #fff;
    background: linear-gradient(to bottom, #2e5b9a 0%, #304a6c 100%);
  }
  .download:hover {
    color: #fff !important;
  }

  .download:focus {
    color: #fff !important;
  }
</style>
